<template>
    <div class="content">
        <el-form :model="userForm" :rules="rules" ref="ruleForm" label-width="100px" class="el-form">
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="userForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="userForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="Email" prop="email">
                <el-input v-model="userForm.nickname"></el-input>
            </el-form-item>
            <el-form-item label="QQ" prop="QQ">
                <el-input v-model="userForm.nickname"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data () {
        return {
            userForm: {
                nickname: '',
                username: '',
                email: '',
                QQ:''
            },
            rules: {
                nickname: [
                    { required: true, message: '请输入昵称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                email: [
                { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {
                        required: true,
                        pattern: /^\w+@[a-z0-9]+\.[a-z]{2,4}$/,
                        message: '请输入正确的邮箱',
                        trigger: 'blur'
                    }
                ],
                QQ: [
                    { required: true, message: '请输入QQ', trigger: 'blur' },
                    { min: 6, max: 11, message: '长度为6~11个数字 ', trigger: 'blur' },
                    {
                        required: true,
                        pattern: /\d{6,11}/,
                        message: '请输入正确的QQ',
                        trigger: 'blur'
                    }
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            })
        }
    }
}
</script>
<style scoped>
.content {
    width: 100%;
    min-height: 800px;
    background: #ffffff;
    margin-left: 20px;
}
.el-form {
    width:50%;
    margin-top: 20px;
}
.el-form-item__content {
    text-align: left;
}
</style>